<template>
  <view class="consultation">
    <view class="consultation-header">
      <view class="consultation-header-title">健康咨询</view>
      <view class="consultation-header-span"
        >更多<tui-icon name="arrowright" :size="18"></tui-icon
      ></view>
    </view>
    <view class="consultation-body">
      <view class="consultation-body-item" v-for="item of 4" :key="item">
        <view class="consultation-body-box">
          <text class="consultation-body-item-title">
            因为经常掏耳朵，女子患上恶性肿瘤！紧急提醒：这样掏耳朵真不行！
          </text>
          <text class="consultation-body-item-time">
            发布时间：2024-06-25
          </text>
        </view>
        <image
          src="@/static/02.png"
          style="width: 150rpx; height: 136rpx"
          mode="scaleToFill"
        />
      </view>
    </view>
  </view>
</template>

<script lang="js" setup></script>

<style scoped lang="scss">
.consultation {
  background-color: white;
  border-radius: 16rpx;
  &-header {
    padding: 16rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    &-title {
      font-size: 32rpx;
      font-weight: 700;
      color: rgba(51, 51, 51, 1);
    }
    &-span {
      color: rgba(153, 153, 153, 1);
      font-size: 28rpx;
      font-weight: 400;
      display: flex;
      align-items: center;
    }
  }

  &-body {
    &-item {
      padding: 32rpx 30rpx;
      display: flex;

      &-title {
        color: rgba(51, 51, 51, 1);
        font-size: 28rpx;
        font-weight: 700;
        line-height: 40rpx;
        display: block;
      }
      &-time {
        padding-top: 16rpx;
        color: rgba(153, 153, 153, 1);
        font-size: 24rpx;
        font-weight: 400;
        line-height: 34rpx;
      }
    }

    &-box {
      width: 494rpx;
      height: auto;
    }
  }
}
</style>
